<template>
    <div class="video_box">
        <navigate>视频播放</navigate>
        <div class="video_cont">
            <video :ref="el => { if (el) this.videoRefs = el }" :src="videoInfo.file" class="video" autoplay loop
                @loadedmetadata="onVideoLoaded" @error="onVideoError" @play="onVideoPlay" @pause="onVideoPause"
                @click.stop="handleVideoClick"></video>
            <img src="@/assets/images/function/transparent_pause_icon.png" alt="" class="video_img" v-if="!isPlaying"
                @click.stop="toPlay(1)" />
            <img src="@/assets/images/function/transparent_play_icon.png" alt="" class="video_img" v-if="false"
                @click.stop="toPlay(2)" />
            <div class="video_desc">
                <div class="video_tit">{{ videoInfo.name }}</div>
                <div class="play_progress ">
                    <div class="progress_bar">
                        <div class="file_bar" :style="{ width: progress + '%' }"></div>
                        <div class="sliding_block" :style="{ left: progress + '%' }"></div>
                    </div>
                    <div class="progress_time">{{ formatDuration(videoInfo?.duration) }}</div>
                </div>
                <div class="video_label">
                    标签：<span>{{ videoInfo.label ? videoInfo.label.join("、 ") : "" }}</span>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import { formatDuration } from "@/utils/time";
export default {
    data() {
        return {
            videoRefs: null,
            isShowPlayImg: true,
            progress: 0,
            videoInfo: {},
            currentTime: 0,
            videoLoaded: false,
            isPlaying: false
        }
    },
    created() {
        this.videoInfo = JSON.parse(this.$route.query.videoInfo)
    },
    mounted() {
        // 监听视频播放进度
        this.videoRefs?.addEventListener('timeupdate', this.updateProgress);
        this.videoRefs?.play();
        this.isShowPlayImg = false;
    },
    methods: {
        formatDuration,
        onVideoLoaded() {
            this.videoLoaded = true;
        },
        onVideoPlay() {
            this.isPlaying = true;
        },
        onVideoPause() {
            this.isPlaying = false;
        },
        onVideoError(error) {
            this.$toast.fail('视频加载失败');
        },
        async toPlay(type) {
            if (type === 1) {
                this.videoRefs.play();
                this.isShowPlayImg = false
            } else {
                this.videoRefs.pause();
                this.isShowPlayImg = true
            }
        },
        handleVideoClick() {
            if (this.isPlaying) {
                this.videoRefs.pause();
            } else {
                this.videoRefs.play();
            }
        },
        updateProgress() {
            this.currentTime = this.videoRefs.currentTime;
            this.progress = (this.videoRefs.currentTime / this.videoRefs.duration) * 100;
        }
    }
}
</script>

<style lang="less" scoped>
.video_box {
    background-color: #111111;
}

.video_cont {
    width: 100%;
    height: 202.67px;
    position: relative;
    margin-top: 50%;
}

.video_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.video {
    width: 100%;
    height: 100%;
}

.video_desc {
    position: fixed;
    bottom: 16.67px;
    width: 100%;
    padding: 0 10px;
    color: #fff;
}

.video_tit {
    font-size: 15.33px;

}

.play_progress {
    display: flex;
    align-items: center;
    margin: 12px 0;
}

.progress_time {
    font-size: 12px;
    margin-left: 10px;
}

.progress_bar {
    position: relative;
    flex: 1;
    height: 5.33px;
    // background: #c2efff;
    border-radius: 2.67px;
    // margin: 0 10px;
    background: rgba(255, 255, 255, 0.1);
    /* 白色背景，10% 不透明度 */

}

.file_bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    // background: linear-gradient(90deg, #0eaeff 0%, #0eaeff 100%);
    border-radius: 3px;
    transition: width 0.1s linear;
    background-color: #fff;
    background: rgba(255, 255, 255, 255);
    /* 10% opaque white */

}

.sliding_block {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0) inset;
    transition: left 0.1s linear;
}

.video_label {
    color: #ffffff;
    opacity: 0.5;
    font-size: 12px;
}
</style>